<template>
	<view class="components-theme">
		<!-- 主题弹窗确认 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="modal_bg"></view>
				<view class="modal_main">
					<view class='nav-list margin-top'>
						<view :class="'nav-li bg-zt' + (index+1)" v-for="(item, index) in inter" :key="index" @click="switchImage(index,item.name)" >
							<view class="nav-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 顶部背景 -->
	<view class='UCenter-bg' :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');'">
		<!-- 主页左上角的设置和换肤 -->
		<view class="user_change text-row padding" @tap="showModal" data-target="Modal">
		<u-icon name="bookmark" size="28px" style="margin-right: 3rpx;" class="padding10"></u-icon>
			<!-- <u-icon name="setting-fill" size="28px" style="margin-right: 3rpx;" class="padding10"></u-icon> -->
		</view>
		
		
	
	<!-- 头像昵称等设置 -->
	<block>
		<view class='text-center'>
			<!-- 头像L -->
			<view class="cu-avatar2 " style="overflow: hidden;"  @click="fnInfoWin" >
				<!-- <open-data type="userAvatarUrl"></open-data> -->
			</view>
			<view class="padding user_name" >
				你好，
				{{username}}
				<!-- <open-data type="userNickName">{{userinfo.username}}</open-data> -->
			</view>
		</view>
	</block>
	</view>
	<block>
		<view class='padding flex text-row text-grey bg-white shadow-warp-my'>
			<view class='flex flex-sub flex-direction solid-right'>
				<navigator url="../../fun/rank_list/rank_list" class="ranks">
				<view class="text-xxl text-orange">{{studyHours}}</view>
				<view class=" text-row" style="font-size: 30rpx;">
					<u-icon name="star" size="23px" style="margin-right: 3rpx;"></u-icon>
					学习时间</view>
					</navigator>
			</view>
			<view class='flex flex-sub flex-direction solid-right'>
				<navigator url="../../fun/ranking/ranking" class="ranks">
									<view class="text-xxl text-blue">{{rankNum}}</view>
									<view class="margin-top-sm text-row" style="font-size: 30rpx;">
										<u-icon name="share" size="23px" style="margin-right: 3rpx;" ></u-icon>积分排行榜</view>
								</navigator>
			</view>
			<view class='flex flex-sub flex-direction'>
				<navigator url="../../fun/jifen/jifen" class="ranks">
				<view class="text-xxl text-red">{{totalIntegral}}</view>
				<view class="margin-top-sm text-row" style="font-size: 30rpx;">
					<u-icon name="thumb-up" size="23px" style="margin-right: 3rpx;"></u-icon> 积分商城</view>
			</navigator>
			</view>
		</view>
	
	<!-- 第一栏 -->
	<view class="cu-list menu card-menu margin-top-lg margin-bottom-sm shadow-shop bg-white text-black my-radius sm-border">
		
		<navigator url="../../fun/jifen/jifen" >
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/bianqian.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>我的积分</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../fun/message/message">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/xiaoxi.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>消息中心</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../fun/AppointHistory/AppointHistory">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/chucuo.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>历史选座</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../fun/Clock/todo/todo">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/qiabao.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>Todo便签</text>
			</view>
		</view>
		</navigator>
	</view>
		
		<!-- 第二栏 -->
		
	<view class="cu-list menu card-menu margin-top-lg margin-bottom-sm shadow-shop bg-white text-black my-radius sm-border">
		<navigator url="../rule/rule" open-type="switchTab">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/dengta.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>使用规则</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../fun/looking/looking">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/qiabao.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>关于占座</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../fun/message/message">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/chucuo.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>我的信息</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../user/callback/index">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/youjian.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>意见反馈</text>
			</view>
		</view>
		</navigator>
		
		<navigator url="../../user/info/info">
		<view class="cu-item " >
			<view class='content cu-btn '>
				<image src='https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icon/gouwu.png'  class='png' mode='aspectFit'></image>
				<text class='text-lg margin-sm'>我的设置</text>
			</view>
		</view>
		</navigator>
		
	</view>
	</block>
	
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userinfo']),
		},
		onLoad() {
			// console.log(this.userinfo);
			this.init();
			// this.username =this.userinfo.username;
		},
		data() {
			return {
				topBackGroupImageIndex : 2,
				modalName:null,
				username:'',
				studyHours:'',
				rankNum:'',
				totalIntegral:'',
				// 设置页面背景
				pic: [{
					link: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/zjx_me_bg1.jpeg',
					name: '春天'
				}, {
					link:'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/zjx_me_bg2.jpeg',
					name: '夏天'
				}, {
					link: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/zjx_me_bg3.jpeg',
					name: '秋天'
				}, {
					link: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/zjx_me_bg4.jpeg',
					name: '冬天'
				}, {
					link: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/zjx_me_bg5.jpeg',
					name: '幽静'
				}, {
					link: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/zjx_me_bg6.jpg',
					name: '天空'
				}]		
				,inter: [{
					title: 'mimicry',
					name: '活力春天'
				}, {
					title: 'theme',
					name: '清爽夏日'
				}, {
					title: 'theme',
					name: '金秋之韵'
				}, {
					title: 'theme',
					name: '冬日之阳'
				}, {
					title: 'theme',
					name: '幽兰星空'
				}, {
					title: 'theme',
					name: '流星之夜'
				}]}},watch:{
			
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.init()();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			switchImage(index,name){
				this.topBackGroupImageIndex = index;
				this.modalName = null;
			},
			showModal(e){
				// console.log(e.currentTarget.dataset.target);
				this.modalName = e.currentTarget.dataset.target;
			},
			fnInfoWin() {
			  uni.navigateTo({
			    url: '/pages/user/info/info'
			  })
			},
			message(){
				uni.navigateTo({
					url:"../../fun/message/message"
				})
			},init(){
				uni.$u.http
					.get('/app/home/personInfo')
					.then(res => {
						console.log(res.data);
						this.username = res.data.userName;
						this.studyHours = res.data.studyHours+"min";
						this.rankNum = "第"+res.data.rankNum+"名";
						this.totalIntegral = res.data.totalIntegral;
					})
					.catch(() => {});	
					
			}
			
		}
	}
</script>

<style>
	button{
		background-color: #fff !important;
	}
page{
	background-color: #f4f4f4;
	z-index: -55;
}
.button{
	border: 0px;
}
.UCenter-bg {
		background: #fff;
		background-size: 100% 80%;
		height: 480rpx;
		display: flex;
		justify-content: center;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	.UCenter-bg text {
		opacity: 0.8;
	}
	
	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
		
	}
	.text-center{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		/* background: #ccc; */
		background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/touxiang/2.jpg);
		color: #fff;
		white-space: nowrap;
		border-radius: 2500px;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}
	.padding{
		padding: 25rpx;
	}
	.user_name{
		font-size: 36rpx;
		font-weight: bold;
		color:#007AFF ;
	}
	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.padding10{
		padding: 10rpx;
	}
	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}
	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}
	.text-xxl{
	    color: #f37b1d;
		font-size: 22px;
	}
	
	.user_change{
		position: absolute;
		right: 0;
		top: 0;
	}

	/* 常见样式 */
	.bg-white{
		background-color: white;
	}
	.text-grey{
		    color: #8799a3;
	}

	.text-row{
		flex-direction: row;
		justify-content: space-around;
	
		display: flex;
		align-items: stretch;
	}
	.flex-sub,.ranks{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bg-white{
		background-color: #ffffff;
	}
	.cu-list{
		margin: 15px;
	}
	.cu-item{
		position: relative;
		display: flex;
		/* padding: 0 15px; */
		min-height: 50px;
		justify-content: space-between;
		align-items: center;
	}
	.my-radius{
		border-radius: 6px;
	}
	.cu-list.menu>.cu-item uni-button.content {
	    padding: 0;
	    background-color: transparent;
	    justify-content: flex-start;
		font-size: 15px;
		line-height: 1.6em;
	}
	.menu{
		background-color: #FFFFFF;
	}
	.cu-btn {
	    position: relative;
	    border: 0px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    box-sizing: border-box;
	    padding: 0 15px;
	    font-size: 14px;
	    height: 32px;
	    line-height: 1;
	    text-align: center;
	    text-decoration: none;
	    overflow: visible;
	    margin-left: initial;
	    -webkit-transform: translate(0px, 0px);
	    transform: translate(0px, 0px);
	    margin-right: initial;
	}
	.cu-list.card-menu {
	    overflow: hidden;
	    margin-right: 15px;
	    margin-left: 15px;
	    border-radius: 10px;
	}
	.png{
		    display: inline-block;
		    margin-right: 5px;
		    width: 1.8em;
		    height: 1.8em;
	}
	.text-lg{
		font-size: 16px
	}
	.margin-sm{
		margin: 10rpx;
	}
	 .cu-modal {
	    position: fixed;
	   top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1110;
	    opacity: 0;
	    outline: 0;
	    text-align: center;
	   -ms-transform: scale(1.185);
	    -webkit-transform: scale(1.185);
	    transform: scale(1.185);
	    -webkit-backface-visibility: hidden;
	    backface-visibility: hidden;
	    -webkit-perspective: 1000px;
	    perspective: 1000px;
	    background: rgba(0, 0, 0, 0.6);
	    transition: all 0.3s ease-in-out 0s;
	    pointer-events: none;
		
	}
	.cu-modal.show {
	    opacity: 1;
	    transition-duration: 0.3s;
	    -ms-transform: scale(1);
	    -webkit-transform: scale(1);
	    transform: scale(1);
	    overflow-x: hidden;
	    overflow-y: auto;
	    pointer-events: auto;
	}
	.cu-dialog{
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		/* overflow: visible; */
		width: 340px;
		padding: 150px 0 35px;
		max-width: 100%;
		/* background-color: #f8f8f8; */
		border-radius: 5px;
		/* padding: 300rpx 0 70rpx; */
	}
	
	.cu-modal::before {
	    content: "\200B";
	    display: inline-block;
	    height: 100%;
	    vertical-align: middle;
	}
	 .modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -50px;
		/* background-image: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/modal_bg.png); */
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.modal_main{
		background-color: #FFFFFF;
	}
	.nav-list{
		display: flex;
		flex-wrap: wrap;
		padding: 20px 20px 0px;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.nav-li {
		padding: 11rpx;
		border-radius: 12rpx;
		width: 40%;
		margin: 0 2.5% 40rpx;
		position: relative;
		z-index: 1;		
		/* background-image: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/user_bg/NyU04x.png); */
		background-size: cover;
		background-position: center;
	}
	
	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	/* 主题色 */
	.bg-zt1 {
		color: #fff;
		background: #81d949;
	}
	
	.bg-zt2 {
		color: #fff;
		background: #b2e6ff;
	}
	
	.bg-zt3 {
		color: #fff;
		background: #f3cd41;
	}
	
	.bg-zt4 {
		color: #fff;
		background: #ddecf7;
	}
	
	.bg-zt5 {
		color: #fff;
		background: #152e9d;
	}
	
	.bg-zt6 {
		color: #fff;
		background: #0f1358;
	}
	
	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		position: relative;
	}
	
	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}
	
	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}
	
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}
	
	
button::after{ border: none;} 
</style>
